<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--	<script type="text/javascript" src="http://www.lovejavascript.com/js/jquery-2.1.4.min.js"></script>-->
	<script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}" ></script>
	<link rel="stylesheet" type="text/css" th:href="@{/css/GridManager.css}">
	<script type="text/javascript" th:src="@{/js/GridManager.js}" ></script>
<title>GridManager:jquery环境下渲染</title>
<style>

	html, body{
		width: 100%;
		height: 100%;
		overflow-x:hidden;
		margin: 0px;
		padding: 0px;
	}
</style>
</head>

<body>

	<div class="dialog-demo">
		<button onclick="deployHoliday()">部署请假流程</button>
		<button onclick="deployHuiqian()">部署会签流程</button>
		<button onclick="deployDynamic()">部署动态流程</button>
	</div>
	<br/>
	<div class="dialog-demo">
		<table grid-manager="demoOne"></table>
	</div>
<script type="text/javascript" >
	function remove(id){
        if(confirm("确定删除该流程?")){
            $.post("/flowable/deploy/remove", {id:id},
                function(data,status){
                    $('table').GM('setQuery', null, function(){
                        console.log('刷新执行成功');
                    });
                }
			);
        }
	}


    function deployHoliday(){
        if(confirm("确定部署请假流程?")){
            $.post("/holiday/deploy", null,
                function(data,status){
                    $('table').GM('setQuery', null, function(){
                        console.log('刷新执行成功');
                    });
                }
            );
        }
    }

	function deployHuiqian(){
		if(confirm("确定部署会签流程?")){
			$.post("/huiqian/deploy", null,
					function(data,status){
						$('table').GM('setQuery', null, function(){
							console.log('刷新执行成功');
						});
					}
			);
		}
	}

	function deployDynamic(){
		if(confirm("确定部署动态流程?")){
			$.post("/dynamic/deploy", null,
					function(data,status){
						$('table').GM('setQuery', null, function(){
							console.log('刷新执行成功');
						});
					}
			);
		}
	}

	//发起流程
    function add(key, id){
		if(confirm("确定发起请假流程?，用户名：xuling，请假天数：3天，请假原因：出去旅游")){
			var data = {
				"userName" : "xuling",
				"dayNum" : 3,
				"reason" : "出去旅游",
				"processDefinitionKey" : id
			};
			var url = "/holiday/add";
			if (key.indexOf('huiqian') !== -1) {
				url = "/huiqian/add";
			}
			$.ajax({
				url: url,
				type: "POST",
				contentType: 'application/json', // 设置Content Type为JSON
				data: JSON.stringify(data), // 将参数对象转换成JSON字符串并传递
				success: function (response) {
					console.log("请求成功");
					console.log(response); // 处理返回结果
					$('table').GM('setQuery', null, function(){
						console.log('刷新执行成功');
					});
				},
				error: function () {
					console.error("请求失败");
				}
			});
		}
		// $.post(url, data,
		// 	function(data,status){
		// 		$('table').GM('setQuery', null, function(){
		// 			console.log('刷新执行成功');
		// 		});
		// 	}
		// ,"json");
    }

	function showPNG(processDefinitionId){
		window.open("/flowable/processImg?processDefinitionId="+processDefinitionId);
	}

	$('table').GM({
		supportRemind: false,
		gridManagerName: 'test',
//			,disableCache:true,
		height: '400px',
		supportAjaxPage:true,
		supportSorting: true,
		ajax_url: '/flowable/deploy/list',
		ajax_type: 'POST',
		query: {pluginId: 1},
		// dataKey: 'rows',
		// totalsKey: 'total',
		pageSize:20,
		columnData: [
            {key: 'action', remind: 'the action', text: '操作', width: '150px', template: function(action, rowObject){
                    return '<button class="plugin-action edit-action" onclick="add(\''+rowObject.key+'\',\''+ rowObject.id +'\')">发起流程</button>'
                        +'&nbsp;<button class="plugin-action del-action" onclick="remove(\''+rowObject.deploymentId+'\')">删除</button>'
					+'&nbsp;<button class="plugin-action del-action" onclick="showPNG(\''+rowObject.id+'\')">预览</button>';
            }},
            {key: 'deploymentId', text: '部署ID'},
            {key: 'id', text: '流程ID（ProcessDefinitionId）', sorting: 'DESC', width: '200px'},
            {key: 'category', text: '类别', width: '250px'},
		    {key: 'name', text: '名称', width: '120px'},
            {key: 'key', text: 'key', width: '100px'},
			{key: 'version', text: '版本'},
			{key: 'resourceName', text: '资源文件', width: '200px'},
            {key: 'description', text: '说明', width: '200px'},
            {key: 'hasStartFormKey', text: '开始状态'},
            {key: 'hasGraphicalNotation', text: '图形表示'},
            {key: 'suspensionState', text: '暂停状态'},
            {key: 'tenantId', text: '租户标识'},
            {key: 'engineVersion', text: '引擎版本'},
            {key: 'derivedFrom', text: '来源'},
            {key: 'derivedFromRoot', text: '根来源'},
            {key: 'derivedVersion', text: '派生版本'}
		],
		// 分页前事件
		pagingBefore: function(query){
			console.log('pagingBefore', query);
		},
		// 分页后事件
		pagingAfter: function(data){
			console.log('pagingAfter', data);
		},
		// 排序前事件
		sortingBefore: function (data) {
			console.log('sortBefore', data);
		},
		// 排序后事件
		sortingAfter: function (data) {
			console.log('sortAfter', data);
		},
		// 宽度调整前事件
		adjustBefore: function (event) {
			console.log('adjustBefore', event);
		},
		// 宽度调整后事件
		adjustAfter: function (event) {
			console.log('adjustAfter', event);
		},
		// 拖拽前事件
		dragBefore: function (event) {
			console.log('dragBefore', event);
		},
		// 拖拽后事件
		dragAfter: function (event) {
			console.log('dragAfter', event);
		}
	});


</script>
</body>
</html>
